Revision:
code:
<div class="g-container">
<div class = "j"> </div>
<div class = "j"> </div>
</div>
<style>
.g-container {position: relative; width: 20vw; margin: 2vw auto; filter: contrast(150%)
brightness(110%);}
.j {position: absolute; top: 0; left: 0; width: 4.7vw; height: 21.8vw; z-index: 1;
background: #24f6f0;}
.j::before {content: ""; position: absolute; width: 10vw; height: 10vw; border: 4.7vw
solid #24f6f0; border-top: 4.7vw solid transparent; border-radius: 50%; top: 12.1vw;
left: -14.7vw; transform: rotate(45deg);}
.j::after { content: ""; position: absolute; width: 14vw; height: 14vw; border: 4vw
solid #24f6f0; border-right: 4vw solid transparent; border-top: 4vw solid transparent;
border-left: 4vw solid transparent; top: -11vw; right: -18.3vw ;border-radius: 100%;
transform: rotate(45deg); z-index: -10; }
.j:last-child {left: 1vw; top: 1vw; background: #fe2d52; z-index: 100; mix-blend-mode:
lighten; animation: moveLeft 10s infinite;}
.j:last-child::before {border: 4.7vw solid #fe2d52; border-top: 4.7vw solid transparent;}
.j:last-child::after {border: 4vw solid #fe2d52; border-right: 4vw solid transparent;
border-top: 4vw solid transparent; border-left: 4vw solid transparent;}
@keyframes moveLeft {
0% {transform: translate(20vw);}
50% {transform: translate(0vw);}
100% {transform: translate(0vw);}
}
</style>
code:
<div>
<div class = "mix3d"> </div>
</div>
<style>
.mix3d {margin: 3vw auto 0; width: 40vw; height: 28vw; z-index: 2;
background: url('../pictures/Girl-pearl.jpg'), cyan;
background-blend-mode: lighten;background-size: center;}
.mix3d::after { content: ''; position: absolute; width: 40vw; height: 28vw;
z-index: 3; background: url('../pictures/Girl-pearl.jpg'), red;
background-blend-mode: lighten; margin-left: 1vw; background-size: center;
mix-blend-mode: darken;}
</style>
code:
<div class="text-magic" data-word="CSSTextGlitch">
<div class="white"></div>
</div>
<style>
.text-magic {display: block; width: 40vw; height: 20vw; position: relative; top: 10%; left: 5%;
font-size: 3.6vw; font-family: Raleway, Verdana, Arial; color: transparent;}
.white {position: relative; left: -1vw; width: 70%; height: .5vw; background: #000; z-index: 4;
animation: whiteMove 10s ease-out infinite; }
.text-magic::before {content: attr(data-word); position: absolute; top: 0; left: 0; height: 3.6vw;
color: red; overflow: hidden; z-index: 2; filter: contrast(200%); text-shadow: .3vw 0 0 red;
animation: move 0.95s infinite;}
.text-magic::after {content: attr(data-word); position: absolute; top: 0; left: -.1vw; height: 3.6vw;
color: rgba(255, 255, 255, 0.8); overflow: hidden; z-index: 3; filter: contrast(200%);
text-shadow: -.1vw 0 0 cyan; mix-blend-mode: lighten; animation: move 1.1s infinite 0.2s; }
@keyframes whiteMove {
9% {top: 3.8vw;}
14% {top: .8vw;}
18% {top: 4.2vw;}
22% {top: .1vw;}
32% {top: 3.2vw;}
34% {top: 1.2vw;}
40% {top: 2.6vw;}
43% {top: .7vw; }
99% {top: 3vw;}
}
@keyframes move {
10% {top: -0.04vw;left: -.11vw;}
20% {top: 0.04vw;left: -0.02vw;}
30% {left: .05vw;}
40% {top: -0.03vw; left: -0.07vw;}
50% {left: 0.02vw;}
60% {top: 0.18vw; left: -0.12vw;}
70% {top: -.1vw; left: 0.01vw;}
80% {top: -0.04vw; left: -0.09vw;}
90% {left: 0.12vw;}
100% {left: -.12vw;}
}
</style>
code:
<div class="text-magic_A" data-word="CSSTextMagica-2">
CSSTextMagic-2
<div class="white-a"></div>
</div>
<style>
.text-magic_A {display: block; width: 40vw; height: 20vh; position: relative; top: 0%; left: 5%;
font-size: 3.6vw; font-family: Raleway, Verdana, Arial; color: #fff;}
.white-a {position: relative; left: 1vw; width: 70%; height: .5vw; background: #000; z-index: 4;
animation: whiteMove2 3s ease-out infinite;}
.text-magic_A::before {content: attr(data-word); position: absolute; top: 0; left: 0.05vw;
height: 0vw; color: rgba(255, 255, 255, 0.9); overflow: hidden; z-index: 2;
animation: redShadow 1s ease-in infinite; filter: contrast(200%); text-shadow: .3vw 0 0 red;}
.text-magic_A::after {content: attr(data-word); position: absolute; top: 0; left: -.3vw;
height: 3.6vw; color: rgba(255, 255, 255, 0.8); overflow: hidden; z-index: 3; background:
rgba(0, 0, 0, 0.9); animation: redHeight 1.5s ease-out infinite; filter: contrast(200%);
text-shadow: -.3vw 0 0 cyan; mix-blend-mode: darken;}
@keyframes redShadow {
20% {height: 3.2vw;}
60% {height: .6vw;}
100% {height: 4.2vw;}
}
@keyframes redHeight {
20% {height: 4.2vw;}
35% {height: 1.2vw;}
50% {height: 4vw;}
60% {height: 2vw;}
70% {height: 3.4vw;}
80% {height: 2.2vw;}
100% {height: 0vw;}
}
@keyframes whiteMove2 {
8% {top: 3.8vw;}
14% {top: 0.8vw;}
20% {top: 4.2vw;}
32% {top: 0.2vw;}
99% {top: 3vw;}
}
</style>
code:
<div>
<div id="glitchy">
<h3>Top-notch</h3>
<h3>Top-notch</h3>
<h3>Top-notch</h3>
</div>
</div>
<style>
#glitchy{width: 45vw; margin: 2vw auto;}
h3 {display: block; text-align: center; color: burlywood; font-size: 8vw;
letter-spacing: 0.6vw; font-weight: 500; margin: 0; line-height: 0;
animation: glitch1 0.5s infinites;}
h3:nth-child(2) {color: red; animation: glitch2 1.0s infinite;}
h3:nth-child(3) {color: darkgreen; animation: glitch3 1.0s infinite;}
@keyframes glitch1 {
0% {transform: none; opacity: 1;}
50% {transform: skew(-2deg, 0.6deg); opacity: 0.75;}
100% {transform: none; opacity: 1; }
}
@keyframes glitch2 {
0% {transform: none; opacity: 0.25;}
50% {transform: translate(-.3vw, -.1vw); opacity: 0.5;}
100% {transform: none; opacity: 0.25;}
}
@keyframes glitch3 {
0% {transform: none; opacity: 0.25;}
50% {transform: translate(0.3vw, 0.1vw); opacity: 0.5;}
100% {transform: none; opacity: 0.25;}
}
</style>
code:
<div id="example">
<div id="wrapper">
<h1 class="glitch" data-text="glitch">glitch</h1>
</div>
</div>
<style>
.glitch { padding: 0; margin: 0; font-family: 'Montserrat', sans-serif;}
#example { height: 100vh; width: 100%; margin: 0; padding: 0; display: flex;
flex-direction: column; justify-content: center;
align-items: center; background: linear-gradient(rgba(5, 5, 5, 0.6), rgba(0, 0, 0, 0)),
repeating-linear-gradient(0, transparent, transparent .2vw, black .3vw, black .3vw),
url("8.jpg"); background-size: cover; background-position: center; z-index: 1;}
#wrapper {text-align: center;}
.glitch {position: relative; color: white; font-size: 4vw; letter-spacing: .4vw;
animation: glitch-skew 0.5s infinite linear alternate-reverse;}
.glitch::after {content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%;
height: 100%; left: -.2vw; text-shadow: -.2vw 0 #00fff9, .2vw .2vw #ff00c1;
animation: glitch-anim2 1s infinite linear alternate-reverse;}
@keyframes glitch-anim2 {
0% {clip: rect(6.6vw, 999.9vw, 2.8vw, 0); transform: skew(0.12deg);}
5% {clip: rect(8.5vw, 999.9vw, 4.0vw, 0); transform: skew(0.7deg);}
10% {clip: rect(1.4vw, 999.9vw, 3.3vw, 0); transform: skew(0.81deg);}
15% {clip: rect(4.8vw, 999.9vw, 7.6vw, 0); transform: skew(0.57deg);}
20% {clip: rect(7.7vw, 999.9vw, 1.6vw, 0); transform: skew(0.4deg);}
25% {clip: rect(1.5vw, 999.9vw, 4.3vw, 0); transform: skew(0.27deg);}
30% {clip: rect(3.3vw, 999.9vw, 1.1vw, 0); transform: skew(0.84deg);}
35% {clip: rect(5.0vw, 999.9vw, 5.1vw, 0); transform: skew(0.16deg);}
40% {clip: rect(5.2vw, 999.9vw, 1.1vw, 0); transform: skew(0.21deg);}
45% {clip: rect(3.9vw, 999.9vw, 5.8vw, 0); transform: skew(0.98deg);}
50% {clip: rect(8.8vw, 999.9vw, 4.2vw, 0); transform: skew(0.42deg);}
55% {clip: rect(9.8vw, 999.9vw, 1.1vw, 0); transform: skew(0.51deg);}
60% {clip: rect(7.3vw, 999.9vw, 7.3vw, 0); transform: skew(0.81deg);}
65% {clip: rect(8.2vw, 999.9vw, 5.9vw, 0); transform: skew(1.00deg);}
70% {clip: rect(6.4vw, 999.9vw, 8.4vw, 0); transform: skew(0.94deg);}
75% {clip: rect(4.1vw, 999.9vw, 4.4vw, 0); transform: skew(0.38deg);}
80% {clip: rect(2.3vw, 999.9vw, 3.5vw, 0); transform: skew(0.54deg);}
85% {clip: rect(2.0vw, 999.9vw, 10.0vw, 0); transform: skew(0.76deg);}
90% {clip: rect(0.9vw, 999.9vw, 9.6vw, 0); transform: skew(0.64deg);}
95% {clip: rect(2.9vw, 999.9vw, 8.2vw, 0); transform: skew(0.47deg);}
100% {clip: rect(1.5vw, 999.9vw, 9.4vw, 0); transform: skew(0.76deg);}
}
@keyframes glitch-skew {
0% {transform: skew(2deg);}
10% {transform: skew(4deg);}
20% {transform: skew(4deg);}
30% {transform: skew(-2deg);}
40% {transform: skew(4deg);}
50% {transform: skew(2deg);}
60% {transform: skew(-3deg);}
70% {transform: skew(-1deg);}
80% {transform: skew(-3deg);}
90% {transform: skew(-2deg);}
100% {transform: skew(-2deg);}
}
</style>